<template>
  <div id="employee">
    <div class="employee-top">
      <el-input
        style="width: 240px; margin-left: 10px; margin-right: 20px"
        placeholder="请输入职员编号"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary" @click="doAdd()">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="">导出</el-button>
    </div>
    <div class="employee-content">
      <el-table
        :data="tableData"
        border
        style="width: 100%; font-size: 13px; margin-left: 30px"
      >
        <el-table-column fixed prop="employeeCode" label="职员编号" width="260">
        </el-table-column>
        <el-table-column prop="employeeName" label="职员名称" width="150">
        </el-table-column>
        <el-table-column prop="employeePhone" label="手机号码" width="150">
        </el-table-column>
        <el-table-column prop="aName" label="部门" width="150">
        </el-table-column>
        <el-table-column prop="rolesName" label="角色" width="150">
        </el-table-column>
        <el-table-column prop="status" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.zip"
              active-color="#66b1ff"
              inactive-color="#c1c1c1"
              active-value="200333"
              inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="employeeId" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="delet(scope.row.employeeId)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button
              type="text"
              @click="look(scope.row.employeeId)"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      width="450px"
      top="100px"
      title="新增职员"
      :visible.sync="dialogFormVisible"
    >
      <table>
        <tr>
          <td>职员编号</td>
          <td><el-input v-model="employee.employeeCode"></el-input></td>
        </tr>
        <br />
        <tr>
          <td>职员名称</td>
          <td><el-input v-model="employee.employeeName"></el-input></td>
        </tr>
        <br />
        <tr>
          <td>手机号码</td>
          <td><el-input v-model="employee.employeePhone"></el-input></td>
        </tr>
        <br />
        <tr>
          <td>部门</td>
          <td>
            <el-select v-model="employee.departId" placeholder="请选择部门">
              <el-option
                v-for="item in options"
                :key="item.relationId"
                :label="item.relationName"
                :value="item.relationId"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <br />
        <tr>
          <td>角色</td>
          <td>
            <el-select v-model="rids" multiple placeholder="请选择角色">
              <el-option
                v-for="item in option"
                :key="item.rid"
                :label="item.roleName"
                :value="item.rid"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <br />
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="450px"
      top="100px"
      title="编辑职员"
      :visible.sync="dialogFormVisibled"
    >
      <table>
        <tr>
          <td>职员编号</td>
          <td><el-input v-model="employee.employeeCode"></el-input></td>
        </tr>
        <br />
        <tr>
          <td>职员名称</td>
          <td><el-input v-model="employee.employeeName"></el-input></td>
        </tr>
        <br />
        <tr>
          <td>手机号码</td>
          <td><el-input v-model="employee.employeePhone"></el-input></td>
        </tr>
        <br />
        <tr>
          <td>部门</td>
          <td>
            <el-select v-model="employee.departId" placeholder="请选择部门">
              <el-option
                v-for="item in options"
                :key="item.relationId"
                :label="item.relationName"
                :value="item.relationId"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <br />
        <tr>
          <td>角色</td>
          <td>
            <el-select v-model="rids" multiple placeholder="请选择角色">
              <el-option
                v-for="item in option"
                :key="item.rid"
                :label="item.roleName"
                :value="item.rid"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <br />
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibled = false">取 消</el-button>
        <el-button
          type="primary"
          v-model="employee.employeeId"
          @click="update()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "employee",

  data() {
    return {
      rids: [],
      dialogFormVisibled: false,
      dialogFormVisible: false,
      switchValue: "1",
      options: [],
      value: "",
      input: "",
      tableData: [],
      option: [],
      employee: {
        rolesName: "",
        employeeCode: "",
        employeeName: "",
        employeePhone: "",
        departId: "",
        employeeId: "",
      },
    };
  },
  methods: {
    doAdd() {
      this.employee.rolesName = "";
      this.employee.employeeCode = "";
      this.employee.employeeName = "";
      this.employee.employeePhone = "";
      this.employee.departId = "";
      this.employee.employeeId = "";
      this.dialogFormVisible = true;
    },
    getList() {
      this.axios({
        url: "/info/employee/list",
        params: {
          pageNum: 1,
          pageSize: 5,
        },
      })
        .then((res) => {
          this.getDepart();
          this.getRoles();
          console.log(res);
          this.tableData = res.data.pageInfo.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getDepart() {
      this.axios({
        url: "/info/relation/selectRe",
      })
        .then((rs) => {
          this.options = rs.data.relation;
          console.log("Aaaa", this.options);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getRoles() {
      this.axios({
        url: "/info/role/list",
      })
        .then((rs) => {
          console.log(rs);
          this.option = rs.data.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    save() {
      var formData = new FormData();
      formData = {
        ids: JSON.stringify(this.rids),
        employee: JSON.stringify(this.employee),
      };
      this.axios({
        url: "/info/employee/add",
        method: "post",
        data: {
          ...formData,
        },
      }).then((rs) => {
        if (rs.data.code == 667) {
          alert(rs.data.msg);
          return;
        }
        if (rs.data.isAdd === true) {
          alert("增加成功");
          this.getList();
          this.rids = [];
          this.dialogFormVisible = false;
        } else {
          alert("增加失败");
          this.dialogFormVisible = false;
        }
      });
    },
    look(id) {
      this.axios({
        url: "/info/userRole/list",
        params: {
          userId: id,
        },
      }).then((rs) => {
        let rids = [];
        rs.data.list.forEach((element) => {
          rids.push(element.roleId);
        });
        this.rids = rids;
        console.log("rid", rs.data.list);
      });
      this.dialogFormVisibled = true;
      this.axios({
        url: "/info/employee/one",
        params: {
          employeeId: id,
        },
      }).then((rs) => {
        this.employee = rs.data.employee;
      });
    },
    update() {
      var formData = new FormData();
      formData = {
        ids: JSON.stringify(this.rids),
        employee: JSON.stringify(this.employee),
      };
      this.axios({
        url: "/info/employee/update",
        method: "post",
        data: {
          ...formData,
        },
      }).then((rs) => {
        if (rs.data.isUpdate == true) {
          alert("修改成功");
          this.dialogFormVisibled = false;
          this.rids = [];
          this.getList();
        } else {
          alert("修改失败");
          this.dialogFormVisibled = false;
        }
      });
    },
    delet(id) {
      if (confirm("是否删除")) {
        this.axios({
          url: "/info/employee/delete",
          params: {
            id,
          },
        }).then((rs) => {
          if (rs.data.isDelete === true) {
            alert("删除成功");
            this.getList();
          } else {
            alert("删除失败");
          }
        });
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
#employee {
  width: 100%;
  height: 100%;
}

.employee-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.employee-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}

/* 
/deep/ .el-dialog {
  height: 600px;
} */
</style>